<template>
  <h3 ref="group">我是group元素</h3>
  <button @click="conGroup">打印ref元素</button>
  <children ref="chil" />
</template>

<script>
import { ref, watchEffect } from "vue";
import children from "./children.vue";
export default {
  components: {
    children,
  },
  setup(props) {
    // 需要在元素或者子组件使用ref属性时 可通过ref一个null对象
    //  在在模板中  ref绑定的值是一个ref对象  会自动将元素或者组件实例赋值给这个ref对象
    const group = ref(null);
    const chil = ref(null);
    const conGroup = () => {
      console.log(group.value);
      chil.value.foo();
      // console.log(chil.value.foo());
    };
    return {
      group,
      conGroup,
      chil,
    };
  },
};
</script>

<style></style>
